<div id="querygroup">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryGroup")}}</h3>
        <div style="height: 42px;padding-top: 3px;">
            <div style="float: left;position: relative;line-height:32px;">
                &nbsp;{{$t("reportForm.selectAccount")}} : &nbsp;
            </div>
            <div style="float: left;position: relative;width: 200px;line-height:32px;">
                <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                    <i-input v-model.trim="sosoValue" icon="ios-search-outline" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" @on-click="focus" :placeholder="placeholder"></i-input>
                    <transition name="fade">
                        <div class="search-item-wrapper" v-show="isShowMatchDev">
                            <Tree :data="treeData" @on-check-change="onCheckedDevice"></Tree>
                        </div>
                    </transition>
                </div>
            </div>
            <div style="float: left;padding-left: 10px;">
                <i-input v-model.trim="queryParameter"></i-input>
            </div>
            <div style="float: left;padding-left: 10px;">
                <i-button type="primary" @click="queryAllgroupsInfo">{{$t("reportForm.query")}}</i-button>
            </div>
        </div>
        <div>
            <i-table :columns="columnsList" :data="tableData" :height="taleHeight" :loading="loading"></i-table>
        </div>
        <!-- <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div> -->

        <Modal v-model="modal" width="900" :title="$t('group.editGroup')">
            <div style="width:850px;margin:10px auto">
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.groupName")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="groupname"></i-input>
                    </i-col>
                    <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                        <span>
                                <Icon type="star"></Icon> {{$t("group.groupNameTip")}}
                            </span>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="6" :offset="6">
                        <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                    <i-col span="6" :offset="1">
                        <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                    </i-col>
                </Row>
            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#querygroup",
            i18n: utils.getI18n(),
            data: {
                modal: false,
                editDeviceIndex: null,
                queryTableData: [],
                loading: true,
                delGroupObj: {},
                createrToUser: userName,
                queryParameter: "",
                tableData: [],
                columnsList: [{
                    title: vRoot.$t("group.groupName"),
                    key: 'groupname'
                }, {
                    title: vRoot.$t("bgMgr.creater"),
                    key: 'creater'
                }, {
                    title: vRoot.$t("group.devCount"),
                    key: 'deviceslength'
                }, {
                    title: vRoot.$t("bgMgr.action"),
                    key: 'action',
                    width: 220,
                    render: function(h, params) {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        vueInstanse.editDeviceIndex = params.index;
                                        editObject = params.row;
                                        vueInstanse.setGroupInfo();
                                        vueInstanse.modal = true;
                                    }
                                }
                            }, vRoot.$t("bgMgr.edit")),

                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: vRoot.$t("message.confirmDel")
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    'on-ok': function() {
                                        vueInstanse.del(params.row.groupid);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, vRoot.$t("bgMgr.delete"))
                            ])
                        ]);
                    }
                }],
                groupname: "",
                mintime: 30,
                maxtime: 3600,
                groupname: "",
                taleHeight: 300,
            },
            methods: {
                queryUsersTree: function(callback) {
                    var url = myUrls.queryUsersTree(),
                        me = this;
                    utils.sendAjax(url, {
                        username: userName
                    }, function(respData) {
                        if (respData.status == 0 && respData.rootuser.user) {
                            callback([me.castUsersTreeToDevicesTree(respData.rootuser)]);
                        } else {
                            me.$Message.error(me.$t('monitor.queryFail'));
                        }
                    });
                },
                castUsersTreeToDevicesTree: function(devicesTreeRecord) {
                    var me = this;
                    var iViewTree = {
                        render: function(h, params) {
                            var username = params.data.title;
                            return h('span', {
                                on: {
                                    'click': function() {
                                        me.createrToUser = username;
                                        me.sosoValue = username;
                                    }
                                },
                                style: {
                                    cursor: 'pointer',
                                    color: (me.createrToUser == username) ? '#2D8CF0' : '#000'
                                }
                            }, [
                                h('span', [
                                    h('Radio', {
                                        props: {
                                            value: username == me.createrToUser
                                        },
                                        style: {
                                            marginRight: '4px',
                                            marginLeft: '4px'
                                        }
                                    }),
                                    h('span', params.data.title)
                                ]),
                            ])
                        },
                        expand: true,
                    };
                    if (devicesTreeRecord != null) {
                        var username = devicesTreeRecord.user.username;
                        var subusers = devicesTreeRecord.subusers;
                        iViewTree.title = username;
                        if (username != null && subusers != null && subusers.length > 0) {
                            var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers);
                            iViewTree.children = subDevicesTreeRecord;
                        }
                    }
                    return iViewTree;
                },
                doCastUsersTreeToDevicesTree: function(usersTrees) {
                    var devicesTreeRecord = [],
                        me = this;
                    if (usersTrees != null && usersTrees.length > 0) {
                        for (var i = 0; i < usersTrees.length; ++i) {
                            var usersTree = usersTrees[i];
                            var username = usersTree.user.username;
                            var subusers = usersTree.subusers;
                            var currentsubDevicesTreeRecord = {
                                render: function(h, params) {
                                    var username = params.data.title;
                                    return h('span', {
                                        on: {
                                            'click': function() {
                                                me.createrToUser = username;
                                                me.sosoValue = username;
                                            }
                                        },
                                        style: {
                                            cursor: 'pointer',
                                            color: (me.createrToUser == username) ? '#2D8CF0' : '#000'
                                        }
                                    }, [
                                        h('span', [
                                            h('Radio', {
                                                props: {
                                                    value: username == me.createrToUser
                                                },
                                                style: {
                                                    marginRight: '4px',
                                                    marginLeft: '4px'
                                                }
                                            }),
                                            h('span', params.data.title)
                                        ]),
                                    ])
                                },
                            };
                            currentsubDevicesTreeRecord.title = username;
                            if (username != null && subusers != null && subusers.length > 0) {
                                var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers);
                                currentsubDevicesTreeRecord.children = subDevicesTreeRecord;
                            }
                            devicesTreeRecord.push(currentsubDevicesTreeRecord);
                        }
                    }
                    return devicesTreeRecord;
                },
                queryAllgroupsInfo: function() {
                    this.sosoValue = this.createrToUser;
                    var url = myUrls.queryGroupByUser();
                    utils.sendAjax(url, {
                        creater: this.createrToUser,
                        keyword: this.queryParameter
                    }, this.doQueryAllgroupsInfo);
                },
                doQueryAllgroupsInfo: function(resp) {
                    if (resp.status === 0 && resp.grouplist !== null) {
                        resp.grouplist.forEach(function(item) {
                            if (item.devices) {
                                item.deviceslength = item.devices.length;
                            } else {
                                item.deviceslength = 0;
                            }
                        })
                        this.tableData = resp.grouplist;
                    } else {
                        this.tableData = [];
                    }
                    this.loading = false;
                },
                del: function(groupid) {
                    var me = this;
                    var url = myUrls.deleteGroup();
                    var data = {
                        groupid: groupid
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            rootuser = null;
                            me.tableData.forEach(function(item, index) {
                                if (item.groupid == groupid) {
                                    me.$delete(me.tableData, index)
                                }
                            });
                            me.$Message.success(me.$t("message.deleteSucc"));
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 148;
                },
                handleSubmit: function() {

                    if (this.groupname == "") {
                        this.$Message.error(this.$t("message.fillGroupNameTip"));
                        return;
                    };
                    var url = myUrls.editGroup(),
                        me = this;
                    var data = {
                        groupid: editObject.groupid,
                        groupname: this.groupname,
                        mintime: this.mintime,
                        maxtime: this.maxtime,
                        groupname: this.groupname,
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            var newData = Object.assign(editObject, data);
                            me.tableData[me.editDeviceIndex] = newData;
                            me.$Message.success(me.$t("message.changeSucc"));
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                resetInfo: function() {
                    this.groupname = "";
                    this.mintime = 30;
                    this.maxtime = 3600;
                    this.groupname = "";
                },
                setGroupInfo: function() {
                    this.groupname = editObject.groupname;
                    this.mintime = editObject.mintime;
                    this.maxtime = editObject.maxtime;
                    this.groupname = editObject.groupname;
                },

            },
            mixins: [treeMixin],
            mounted: function() {
                var me = this;
                me.queryUsersTree(function(usersTree) {
                    me.groupslist = usersTree;
                    me.treeData = usersTree;
                });
                this.sosoValue = userName;
                this.queryAllgroupsInfo();

                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>